<!DOCTYPE html>
<html lang="en">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <title>编辑权限</title>
    <link href="{% static './layui/css/layui.css' %}" rel="stylesheet">
    <script src="{% static './layui/layui.js' %}"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>当前登录的角色</legend>
</fieldset>
<div class="layui-btn-container">
  <button type="button" class="layui-btn layui-btn-sm" lay-demo="getChecked">保存权限</button>
<!--  <button type="button" class="layui-btn layui-btn-sm" lay-demo="setChecked">勾选指定节点</button>-->
  <button type="button" class="layui-btn layui-btn-sm" lay-demo="reload">重置</button>
</div>
{{user_id}}
<div id="test12" class="demo-tree-more"></div>
</body>
<script>
layui.use(['tree', 'util'], function(){
  var tree = layui.tree
  ,layer = layui.layer
  ,util = layui.util

  //模拟数据
  ,data = [

    {% for value in result %}

        {% if value.pid == 0 %}
             {
            title: '{{value.author_name}}'
            ,id: {{value.id}}
            ,field: 'name' + {{value.id}}
            ,checked: false
            ,spread: true
            ,children: [
                 {% for val in result %}
                    {% if val.pid == value.id %}
                            {
                              title: '{{val.author_name}}'
                              ,id: {{val.id}}
                              ,field: 'name' + {{val.id}}
                              ,href: 'https://'
                                {% if val.id in auid_list%}
                                ,checked: true
                                {% endif %}
                            },
                    {% endif %}
                 {% endfor %}
            ]
          },
        {% endif %}

    {% endfor %}
  ]
  //基本演示
  tree.render({
    elem: '#test12'
    ,data: data
    ,showCheckbox: true  //是否显示复选框
    ,id: 'demoId1'
    ,isJump: true //是否允许点击节点时弹出新窗口跳转
    ,click: function(obj){
      var data = obj.data;  //获取当前点击的节点数据
      layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
    }
  });

  //按钮事件
  util.event('lay-demo', {
    getChecked: function(othis){
      var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据

      layer.alert(JSON.stringify(checkedData), {shade:0});
      // console.log(checkedData);
      var data_list = []
      // 循环简化数据，因为我后端存数据库的时候，主要ID
      for (var i = 0; i < checkedData.length; i++) {
            console.log(checkedData[i]['id']); // 打印当前索引处的元素值
            data_list.push([{{user_id}}, checkedData[i]['id']])
            for (var n = 0; n < checkedData[i].children.length; n++){
                // console.log(checkedData[i].children[n].id);
                data_list.push([{{user_id}}, checkedData[i].children[n].id])
            }
      }

      // 拿到数据，异步请求后端接口，绑定这个关系

     $.ajax({
                method: "POST",
                url: "{%url 'xyss_admin:authorSave' %}",
                data: { data_list },
                success: function (res) {
                    if(res['status'] == 1){
                        alert(res['msg'])
                    }else{
                        alert(res['msg'])
                    }
                }
     });
    }
    ,setChecked: function(){
      tree.setChecked('demoId1', [12, 16]); //勾选指定节点
    }
    ,reload: function(){
      //重载实例
      tree.reload('demoId1', {

      });

    }
  });

});
</script>
</html>